<template>
    <div class="box">
        <syheader title="购物车" />
        <div class="gwc_nav">
            <div class="nav_left">
                <img src="../assets/gwc_6.png" alt="">
            </div>
            <div class="nav_right">
                <p>购物车</p>
            </div>
        </div>
        <div class="gwc_lists">
            <div class="gwc_list">
                <div class="list_l">
                    <img src="../assets/gwc_2.png" alt="">
                </div>
                <div class="list_c">
                    <img src="../assets/gwc_1.png" alt="">
                </div>
                <div class="list_r">
                    <h3>花名册 2015春天新款 文艺棉质</h3>
                    <h2>￥69元
                        <span>￥118元</span>
                    </h2>
                    <div class="jj">
                        <form action="">
                            <button> - </button>
                            <input type="text" value="1">
                            <button> + </button>
                        </form>
                        <img src="../assets/gwc_4.png" alt="">
                    </div>
                </div>
            </div>
            <div class="gwc_list">
                <div class="list_l">
                    <img src="../assets/gwc_3.png" alt="">
                </div>
                <div class="list_c">
                    <img src="../assets/gwc_1.png" alt="">
                </div>
                <div class="list_r">
                    <h3>花名册 2015春天新款 文艺棉质</h3>
                    <h2>￥69元
                        <span>￥118元</span>
                    </h2>
                    <div class="jj">
                        <form action="">
                            <button> - </button>
                            <input type="text" value="1">
                            <button> + </button>
                        </form>
                        <img src="../assets/gwc_5.png" alt="">
                    </div>
                </div>
            </div>
            <div class="gwc_list">
                <div class="list_l">
                    <img src="../assets/gwc_2.png" alt="">
                </div>
                <div class="list_c">
                    <img src="../assets/gwc_1.png" alt="">
                </div>
                <div class="list_r">
                    <h3>花名册 2015春天新款 文艺棉质</h3>
                    <h2>￥69元
                        <span>￥118元</span>
                    </h2>
                    <div class="jj">
                        <form action="">
                            <button> - </button>
                            <input type="text" value="1">
                            <button> + </button>
                        </form>
                        <img src="../assets/gwc_4.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="gwc_footer">
            <div class="fot_l">
                <img src="../assets/gwc_7.png" alt="">
                <p>全选</p>
            </div>
            <div class="fot_c">
                <p>合计<span>￥69元</span>不含运费</p>
            </div>
            <div class="fot_r">
                <button>去结算</button>
            </div>
        </div>
    </div>
</template>

<script>
import syheader from "../components/syheader.vue";
import axios from "axios";

export default {
    name: "gouwuche",
    components: {
        syheader
    }
};
</script>

<style scoped lang="scss">
.box{
    margin-bottom: 2rem;
    background: #fff;
}
.gwc_nav {
    width: 100%;
    height: 0.88rem;
    border-bottom: 0.01rem solid #ccc;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    .nav_left {
        width: 15%;
        img {
            width: 0.47rem;
            height: 0.33rem;
            margin-left: 0.33rem;
        }
    }
    .nav_right {
        width: 85%;
        p {
            text-align: center;
            padding-right: 15%;
            font-size: 0.3rem;
        }
    }
}

.gwc_lists {
    width: 96%;
    margin-left: 4%;
    .gwc_list {
        width: 100%;
        border-bottom: 0.01rem solid #ccc;
        height: 2.3rem;
        display: flex;
        .list_l {
            width: 7%;
            display: flex;
            align-items: center;
            img {
                width: 0.44rem;
                height: 0.44rem;
            }
        }
        .list_c {
            margin-left: 1%;
            width: 28%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            img {
                width: 1.9rem;
                height: 1.9rem;
            }
        }
        .list_r {
            width: 63%;
            margin-left: 1%;
            h3 {
                font-size: 0.28rem;
                margin-top: 0.24rem;
            }
            h2 {
                margin-top: 0.43rem;
                font-size: 0.32rem;
                line-height: 0.32rem;
                color: red;
                span {
                    color: #b7bdc7;
                    text-decoration: line-through;
                    font-size: 0.16rem;
                }
            }
            .jj {
                margin-top: 0.28rem;
                display: flex;
                height: 0.5rem;
                justify-content: space-between;
                form {
                    display: flex;
                    width: 1.68rem;
                    height: 0.48rem;
                    border: 0.01rem solid #000;
                    border-radius: 0.05rem;
                    button {
                        width: 0.45rem;
                        height: 0.46rem;
                        margin-top: 0.01rem;
                        text-align: center;
                        border: none;
                        background: #fff;
                    }
                    input {
                        text-align: center;
                        width: 0.75rem;
                        height: 0.46rem;
                        margin-top: 0.01rem;
                        border: none;
                        background: #fff;
                        border-left: 0.01rem solid #666;
                        border-right: 0.01rem solid #666;
                    }
                }
                img {
                    width: 0.5rem;
                    margin-right: 10%;
                }
            }
        }
    }
}

.gwc_footer {
    height: 0.97rem;
    border-top: 0.01rem solid #ccc;
    display: flex;
    position: fixed;
    align-items: center;
    bottom: 1rem;
    left: 0;
    width: 100%;
    .fot_l{
        width: 30%;
        display: flex;
        font-size: 0.26rem;
        img{
            width: 0.33rem;
            margin: 0 0.18rem 0 0.24rem;
            height: 0.33rem;
        }
        p{
            line-height: 0.35rem;
        }
    }
    .fot_c{
        width: 40%;
        p{
            font-size: 0.29rem;
            color: #848689;
            span{
                color: red;
                padding: 0 0.1rem;
            }
        }
        
    }
    .fot_r{
        width: 30%;
        button{
            width: 100%;
            height: 0.97rem;
            border: none;
            color: #fff;
            background: red;
        }
    }
}
</style>
